﻿<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="NopControlsTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:NopControls="clr-namespace:NopControls;assembly=NopControls" mc:Ignorable="d"
             Loaded="UserControl_Loaded"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White" Margin="10">
        <sdk:TabControl>
            <sdk:TabItem Header="PolygonTabControl">
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <StackPanel>
                        <TextBlock FontSize="12" Text="PolygonTabControl act as a TabControl where each tab are on a different face of a polygon."/>
                        <TextBlock FontSize="12" Text="Drag pictures to change selected index..." Margin="0,0,0,20"/>
                        <TextBlock FontSize="20" Text="With 2 children" HorizontalAlignment="Center"/>
                        <NopControls:PolygonTabControl HorizontalAlignment="Center" Width="400" Amplitude="0.3" AnimationSpeed="500" Margin="0,0,0,20">
                            <Image Source="Images/01.jpg"/>
                            <Image Source="Images/02.jpg"/>
                        </NopControls:PolygonTabControl>
                        <TextBlock FontSize="20" Text="With 3 children" HorizontalAlignment="Center"/>
                        <NopControls:PolygonTabControl HorizontalAlignment="Center" Width="400" AnimationSpeed="500" Margin="0,0,0,20">
                            <Image Source="Images/01.jpg"/>
                            <Image Source="Images/02.jpg"/>
                            <Image Source="Images/03.jpg"/>
                        </NopControls:PolygonTabControl>
                        <TextBlock FontSize="20" Text="With 6 children" HorizontalAlignment="Center"/>
                        <NopControls:PolygonTabControl HorizontalAlignment="Center" Width="400" AnimationSpeed="500">
                            <Image Source="Images/01.jpg"/>
                            <Image Source="Images/02.jpg"/>
                            <Image Source="Images/03.jpg"/>
                            <Image Source="Images/04.jpg"/>
                            <Image Source="Images/05.jpg"/>
                            <Image Source="Images/06.jpg"/>
                        </NopControls:PolygonTabControl>
                    </StackPanel>
                </ScrollViewer>
            </sdk:TabItem>
            <sdk:TabItem Header="ExpandableTab">
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <StackPanel>
                        <TextBlock FontSize="12" Text="ExpandableTab is a panel you can attach to a border of its container." TextWrapping="Wrap"/>
                        <TextBlock FontSize="12" Text="You can expand it by clicking on the header." TextWrapping="Wrap"/>
                        <Grid Margin="0,10,0,0">
                            <Border BorderBrush="Black" BorderThickness="1" Height="600">
                            </Border>
                            <NopControls:ExpandableTab HeaderContent="Top Tab" HeaderHeight="30" HeaderWidth="100" Height="500" Width="400" HorizontalAlignment="Center" HeaderDockPosition="Top">
                                <Image Source="Images/01.jpg" Margin="6"/>
                            </NopControls:ExpandableTab>
                            <NopControls:ExpandableTab HeaderContent="Bottom Tab" HeaderHeight="30" HeaderWidth="100" Height="500" Width="400" ContainerBackground="Gray" ContainerBorderBrush="Black" Foreground="White" HorizontalAlignment="Center" HeaderDockPosition="Bottom">
                                <Image Source="Images/02.jpg" Margin="6"/>
                            </NopControls:ExpandableTab>
                            <NopControls:ExpandableTab HeaderContent="Left Tab - 1" HeaderHeight="30" HeaderWidth="80" Height="500" Width="400" VerticalAlignment="Center" HeaderDockPosition="Left" HeaderAlignment="Start">
                                <Image Source="Images/03.jpg" Margin="6"/>
                            </NopControls:ExpandableTab>
                            <NopControls:ExpandableTab HeaderContent="Left Tab - 2" HeaderHeight="30" HeaderWidth="80" Height="500" Width="400" VerticalAlignment="Center" HeaderDockPosition="Left" HeaderAlignment="Start" HeaderOffset="40">
                                <Image Source="Images/04.jpg" Margin="6"/>
                            </NopControls:ExpandableTab>
                            <NopControls:ExpandableTab HeaderContent="Left Tab - 3" HeaderHeight="30" HeaderWidth="80" Height="500" Width="400" VerticalAlignment="Center" HeaderDockPosition="Left" HeaderAlignment="Start" HeaderOffset="80">
                                <Image Source="Images/05.jpg" Margin="6"/>
                            </NopControls:ExpandableTab>
                            <NopControls:ExpandableTab HeaderHeight="60" HeaderWidth="70" Height="500" Width="400" VerticalAlignment="Center" HeaderDockPosition="Right">
                                <NopControls:ExpandableTab.HeaderContent>
                                    <StackPanel Orientation="Vertical">
                                        <Image Source="Images/06.jpg" Width="32" Height="32"/>
                                        <TextBlock Text="Right Tab"/>
                                    </StackPanel>    
                                </NopControls:ExpandableTab.HeaderContent>
                                <Image Source="Images/04.jpg" Margin="6"/>
                            </NopControls:ExpandableTab>                            
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
            </sdk:TabItem>
            <sdk:TabItem Header="ColorPicker">
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <StackPanel>
                        <TextBlock FontSize="12" Text="ColorPicker allows you to visually select a color by using RGB, HSV or direct pick system." TextWrapping="Wrap"/>
                       <Grid Margin="0,10,0,0" Width="480">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock FontSize="12" Text="{Binding ElementName=colorPicker, Path=SelectedColor}" HorizontalAlignment="Center"/>
                            <NopControls:ColorPicker x:Name="colorPicker" Grid.Row="1" OriginalColor="AliceBlue" SelectedColor="Purple"/>
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
            </sdk:TabItem>
        </sdk:TabControl>
    </Grid>
</UserControl>
